<template>
  <section>
    <h4>策略模式</h4>
    <form ref = "registerForm" method="post" @submit="main" action="http://zhouyi.com/api/register">
      用户名：<input type="text" name="userName">
      密码：<input type="text" name="password">
      手机号码：<input type="text" name="phoneNumber">
      <button class="btn" type="submit">提交</button>
    </form>
  </section>
</template>

<script>
/**
 * @Description:策略模式
 * @author ZY
 * @date 2022/11/23 22:41
 */
export default {
  name: "DesignStrategy",
  data() {
    return {
    //  策略对象
      strategies:{
        isNoEmpty: function (value, errorMsg) {
          if (value === '') {
            return errorMsg;
          }
        },
        isNoSpace: function (value, errorMsg) {
          if (value.trim() === '') {
            return errorMsg;
          }
        },
        minLength: function (value, length, errorMsg) {
          if (value.trim().length < length) {
            return errorMsg;
          }
        },
        maxLength: function (value, length, errorMsg) {
          if (value.length > length) {
            return errorMsg;
          }
        },
        isMobile: function (value, errorMsg) {
          if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
            return errorMsg;
          }
        }
      }
    }
  },
  created() {


  },
  methods: {
    /*
    * 策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换
    * 场景： 表单验证
            一个系统需要动态地在几种算法中选择一种。
    * */
    main(e) {
      console.log('*******策略模式开始********')
      let that = this
      // 验证类
      class Validator {
        constructor() {
          this.cache = []
        }

        add(dom, rules) {
          for (let i = 0, rule; rule = rules[i++];) {
            let strategyAry = rule.strategy.split(':')
            let errorMsg = rule.errorMsg
            this.cache.push(() => {
              let strategy = strategyAry.shift()
              strategyAry.unshift(dom.value)
              strategyAry.push(errorMsg)
              return that.strategies[strategy].apply(dom, strategyAry)
            })
          }
        }

        start() {
          for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
            let errorMsg = validatorFunc()
            if (errorMsg) {
              return errorMsg
            }
          }
        }
      }

      let registerForm = that.$refs.registerForm
      let validataFunc = function() {
        let validator = new Validator()
        validator.add(registerForm.userName, [{
          strategy: 'isNoEmpty',
          errorMsg: '用户名不可为空'
        }, {
          strategy: 'isNoSpace',
          errorMsg: '不允许以空白字符命名'
        }, {
          strategy: 'minLength:2',
          errorMsg: '用户名长度不能小于2位'
        }])
        validator.add(registerForm.password, [ {
          strategy: 'minLength:6',
          errorMsg: '密码长度不能小于6位'
        }])
        validator.add(registerForm.phoneNumber, [{
          strategy: 'isMobile',
          errorMsg: '请输入正确的手机号码格式'
        }])
        return validator.start()
      }
      let errorMsg = validataFunc()
      if (errorMsg) {
        alert(errorMsg)
        return false
      }
      console.log('*******策略模式结束********')
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn {
    margin-left: 10px;
  }
  input {
    outline: none;
    border: none;
    border-bottom: 1px solid #cecdcd;
    height: 25px;
    color: $color-primary;
  }
  button {
    border-color: $color-primary;
    outline: none;
    border-radius: 5px;
    padding: 2px 20px;

  }
</style>
